<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '社区',
	},
	}
</route>
<template>
	<view>
		<view class="sticky top-0 z-10 bg-white w-full">
			<k-navbar :isMain="true" :bordered="false"></k-navbar>
			<segmented v-if="state.tabList.length" value-key="id" label-key="name" v-model="state.curTab"
				:options="state.tabList"></segmented>
		</view>
		<view class="mx-4">
			<k-list :loading="loading" :is-empty="!articleList.length">
				<article-card :mode="item.image.length > 1 ? 'spread' : 'swiper'"
					:imageKey="item.image.length > 1 ? 'image' : 'image.0'" :data="item" v-for="(item, index) in articleList"
					:key="item.id" @click="to(`pages-sub/post/post-detail?id=${item.id}`)">
				</article-card>
			</k-list>

		</view>

	</view>
</template>

<script setup>
import {
	computed
} from "vue";
import {
	to
} from "@/utils/navigation";
import {
	fetchArticleList,
	fetchArticleCate
} from "@/service/article";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore"
defineOptions({
	options: {
		styleIsolation: 'shared',
	}
});

const state = ref({
	curTab: 0,
	tabList: [],
})

const requestParams = computed(() => {

	return {
		cid: state.value.curTab
	}
})


function getCate() {
	fetchArticleCate().then(res => {
		state.value.tabList = res.data.lists
		if (state.value.tabList.length > 0) {
			state.value.curTab = state.value.tabList[0].id
		}
	})
}

const {
	data: articleList,
	loading,
	refresh
} = useReachBottomLoadMore(fetchArticleList, requestParams);

onLoad(() => {
	getCate();
});

onShow(() => {
	if (state.value.curTab) {
		refresh();
	}
});
</script>

<style lang="scss" scoped>
::v-deep .wd-segmented__item {
	flex: none !important;
	width: 120rpx !important;
}
</style>